<template>
  <el-main>
  <!-- 添加或修改【请填写功能名称】对话框 -->
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="el-form-item__label">
      <span style="color: red">房产信息</span>
      <el-row>
        <el-col :span="12">
          <el-button
            size="mini"
            round
            type="warning"
            @click="dialogSelectVisible = true">收房合同查询
          </el-button>
        </el-col>
        <el-dialog
          title="收房合同列表"
          :visible.sync="dialogSelectVisible"
          width="40%">
          <span>
            <el-table
              :data="tableData"
              style="width: 100%">
              <el-table-column label="业主" align="center" prop="ownerName"/>
              <el-table-column label="房产信息" align="center" prop="houseName"/>
              <el-table-column label="签约日期" align="center" prop="conInfoTime"/>
              <el-table-column label="操作" align="center">
              <template slot-scope="scope">
               <el-tag type="danger" @click="selectById(scope.row)"><i class="el-icon-check">&emsp;选中</i></el-tag>
              </template>
              </el-table-column>
            </el-table>
            <pagination
              v-show="contotal>0"
              :total="contotal"
              :page.sync="querySecParams.pageNum"
              :limit.sync="querySecParams.pageSize"
              @pagination="getList"/>
          </span>
        </el-dialog>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="小区名(使用楼盘名称)" prop="premiseName">
            <el-input v-model="form.premiseName" placeholder="请输入小区名(使用楼盘名称)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房产信息" prop="houseName">
            <el-input v-model="form.houseName" placeholder="请输入房产信息(考虑在房产表中增加house_name，然后带出)" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
      <el-form-item label="所有权类型" prop="houseType">
        <el-select v-model="form.houseType" placeholder="请选择所有权类型(1：国有房产，2：直管房产，3：自管房产，4：军队房产，5：集体所有房产，6：私有(自由)房产，7：港、澳、台投资房产，8：涉外房产，9：其它房产)">
          <el-option label="国有房产" value="1" />
          <el-option label="直管房产" value="2" />
          <el-option label="自管房产" value="3" />
          <el-option label="军队房产" value="4" />
          <el-option label="私有(自由)房产" value="5" />
          <el-option label="港、澳、台投资房产" value="7" />
          <el-option label="涉外房产" value="8" />
          <el-option label="其它房产" value="9" />
        </el-select>
      </el-form-item>
        </el-col>
        <el-col :span="12">
      <el-form-item label="房产证书编号" prop="houseZsNo">
        <el-input v-model="form.houseZsNo" placeholder="请输入房产证书编号" />
      </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="产权地址" prop="cqAddress">
        <el-input v-model="form.cqAddress" placeholder="请输入产权地址" />
      </el-form-item>


      <span style="color: red">业主信息</span>
      <el-row>
        <el-col :span="12">
          <el-form-item label="业主姓名" prop="ownerName">
            <el-input v-model="form.ownerName" placeholder="请输入业主姓名" />
          </el-form-item>
        </el-col>
        <el-form-item label="是否为签约人" prop="signWithOwner">
          <el-input v-model="form.signWithOwner" placeholder="请输入是否为签约人" />
        </el-form-item>
        <el-col :span="12">
          <el-form-item label="业主证件号码" prop="ownerIdCard">
            <el-input v-model="form.ownerIdCard" placeholder="请输入业主证件号码" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="业主手机号" prop="ownerMobile">
            <el-input v-model="form.ownerMobile" placeholder="请输入业主手机号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="业主联系地址" prop="ownerContactAddress">
            <el-input v-model="form.ownerContactAddress" placeholder="请输入业主联系地址" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="签约人(甲方)" prop="signUserName">
            <el-input v-model="form.signUserName" placeholder="请输入签约人(甲方)" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="签约人证件号" prop="signUserIdCard">
            <el-input v-model="form.signUserIdCard" placeholder="请输入签约人证件号" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="签约人手机号" prop="signUserMobile">
            <el-input v-model="form.signUserMobile" placeholder="请输入签约人手机号" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="紧急联系电话" prop="signUserEmergencyPhone">
            <el-input v-model="form.signUserEmergencyPhone" placeholder="请输入紧急联系电话" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="银行账户类型" prop="accountType">
        <el-select v-model="form.accountType" placeholder="请选择银行账户类型">
          <el-option label="中国农业银行" value="1" />
        </el-select>
      </el-form-item>

      <span style="color: red">租约信息</span>
      <el-form-item label="租约期限" required>
        <el-col :span="11">
          <el-form-item prop="leaseStartTime">
            <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.leaseStartTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="leaseEndTime">
            <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择日期" v-model="form.leaseEndTime" style="width: 100%;"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="收房月租金" prop="monthRent">
            <el-input v-model="form.monthRent" placeholder="请输入收房月租金" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="房产押金" prop="depositMoney">
            <el-input v-model="form.depositMoney" placeholder="请输入房产押金" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="支付方式(押X付Y的Y）" required>
        <el-col :span="11">
          <el-form-item prop="depositType">
          <el-select v-model="form.depositType" placeholder="请选择支付方式(押X付Y的X)">
            <el-option label="1" value="1" />
            <el-option label="2" value="2" />
          </el-select>
          </el-form-item>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-form-item prop="paymentType">
          <el-select v-model="form.paymentType" placeholder="请选择支付方式(押X付Y的Y）">
            <el-option label="1" value="1" />
            <el-option label="2" value="2" />
          </el-select>
          </el-form-item>
        </el-col>
      </el-form-item>

      <el-form-item label="备注" prop="remark">
        <el-input type="textarea" v-model="form.remark" placeholder="请输入备注" />
      </el-form-item>
      <el-form-item>
      <el-button type="primary" @click="submitForm">下一步</el-button>
      </el-form-item>
    </el-form>
<!--    附件-->
    <el-dialog
      title="附件"
      :visible.sync="dialogVisible"
      width="80%">
      <el-form :model="ruleForm1" :rules="rules1" ref="ruleForm1" label-width="100px" class="demo-ruleForm">
        <span>房产证图片</span>
        <el-upload
          class="avatar-uploader"
          :action=this.$picUrl
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload">
          <img width="50px" height="50px" v-if="ruleForm1.certPicture" :src="ruleForm1.certPicture" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span>收房合同</span>
        <el-upload
          class="avatar-uploader"
          :action=this.$picUrl
          :show-file-list="false"
          :on-success="handleAvatarSuccess2"
          :before-upload="beforeAvatarUpload2">
          <img width="50px" height="50px" v-if="ruleForm1.certPicture2" :src="ruleForm1.certPicture2" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <span>业主身份证明</span>
        <el-upload
          class="avatar-uploader"
          :action=this.$picUrl
          :show-file-list="false"
          :on-success="handleAvatarSuccess3"
          :before-upload="beforeAvatarUpload3">
          <img width="50px" height="50px" v-if="ruleForm1.certPicture3" :src="ruleForm1.certPicture3" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">上一步</el-button>
      <el-button type="primary" @click="Next">下一步</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="付款单"
      :visible.sync="dialogPayVisible"
      width="80%">
      <el-table v-loading="loading" :data="paylist">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="应付日期" align="center" prop="payableDate" width="180" :formatter="yyyy-MM-dd"/>
        <el-table-column label="金额" align="center" prop="paymentAmount" />
        <el-table-column label="税费" align="center" prop="tax" />
        <el-table-column
          label="付款状态">
          <template slot-scope="scope">
            <p v-if="scope.row.payState==1">未付</p>
            <p v-if="scope.row.payState==2">已付</p>
          </template>
        </el-table-column>
        <el-table-column label="房产租金周期" align="center" prop="paymentDaysBegin" />
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['system:contract:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['system:contract:remove']"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
      <el-button @click="dialogPayVisible = false">上一步</el-button>
      <el-button type="primary" @click="baocun">保存</el-button>
      </span>
    </el-dialog>

  </el-main>

</template>

<script>
import {
  payContract,
  getContract,
  delContract,
  addContract,
  updateContract,
  listContract
} from "@/api/shoufang/contract";
export default {
  name: "Add",
  data(){
     return{
        form:{

        },
       // 表单校验
       rules: {

       },
       dialogVisible:false,
       dialogPayVisible:false,
       dialogSelectVisible:false,
       ruleForm1:{
         certPicture:null,
         certPicture2:null,
         certPicture3:null
       },
       paylist:[],
       contotal:0,
       total:0,
       queryParams:{
          pageNum:1,
          pageSize:3

       },
       querySecParams:{
          pageNum:1,
         pageSize:3
       }
     }
  },
  methods:{
    selectById(row) {
      this.form = row
      this.dialogVisible = false
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateContract(this.form).then(response => {
              this.open = false;
              this.dialogVisible=true
              this.getList();
            });
          } else {
            addContract(this.form).then(response => {
             /* this.msgSuccess("新增成功");*/
              this.open = false;
              this.dialogVisible=true
              this.getList();
            });
          }
        }
      })
  },
    Next(){
      this.dialogPayVisible=true
      this.getPayList()
    },
    handleAvatarSuccess(res) {
      this.ruleForm1.certPicture = res;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess2(res) {
      this.ruleForm1.certPicture2 = res;
    },
    beforeAvatarUpload2(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    handleAvatarSuccess3(res) {
      this.ruleForm1.certPicture3 = res;
    },
    beforeAvatarUpload3(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    getPayList(){
      payContract(this.form).then(response => {
        this.paylist = response.rows;
        this.total=response.total
        this.loading = false;
      });
    },
    baocun(){
         this.dialogVisible=false
         this.dialogPayVisible=false
    },
    getList() {
      listContract(this.querySecParams).then(response => {
        this.tableData = response.rows;
        this.contotal = response.total;
        this.loading = false;
      });
    },
},
  created() {
    this.getList()
    this.getPayList()
  }
}
</script>

<style scoped>
.el-form-item__label {
  text-align: justify;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
